<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">


      <el-form-item label="商品名称" prop="spuName">
        <el-input
          v-model="queryParams.spuName"
          placeholder="请输入商品名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>





      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAddOpen"
          v-hasPermi="['qiantai:spu:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['qiantai:spu:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['qiantai:spu:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['qiantai:spu:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="spuList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="商品id" align="center" prop="id" />
      <el-table-column label="分类名" align="center" prop="spuCategory.name" />
      <el-table-column label="头图" align="center" prop="header" width="100">
        <template slot-scope="scope">
          <image-preview :src="scope.row.header" :width="50" :height="50"/>
        </template>
      </el-table-column>
      <el-table-column label="商品名称" align="center" prop="spuName" />
      <el-table-column label="价格" align="center" prop="price" />
      <el-table-column label="热度" align="center" prop="heat" />
      <el-table-column label="销量" align="center" prop="num" />
      <el-table-column label="商品库存" align="center" prop="ware" />

<el-table-column label="上架状态" align="center">
    <template slot-scope="scope">
      <el-switch
        v-model="scope.row.publishStatus"
        active-value='1'
        inactive-value='2'

        @change="handleSwitchChange(scope.row)"
      >
      </el-switch>
    </template>
  </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['qiantai:spu:edit']"
          >修改</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加商品对话框 -->
        <el-dialog title="添加商品" :visible.sync="addOpen" width="600px" append-to-body>
          <el-form ref="form" :model="form" :rules="rules" label-width="80px">
            <div class="block">
              <span class="demonstration">三级分类</span>
              <el-cascader
                v-model="form.catalogId"
                :options="options"
                :props="{ value: 'id',label:'name' }"
                @change="handleChange">
                </el-cascader>
            </div>
            <el-form-item label="头图" prop="header">
              <image-upload v-model="form.header"/>
            </el-form-item>
            <el-form-item label="商品名称" prop="spuName">
              <el-input v-model="form.spuName" placeholder="请输入商品名称" />
            </el-form-item>
            <el-form-item label="商品描述" prop="spuDescription">
              <el-input v-model="form.spuDescription" placeholder="请输入商品描述" />
            </el-form-item>
            <el-form-item label="价格" prop="price">
              <el-input v-model="form.price" placeholder="请输入价格" />
            </el-form-item>
            <el-form-item label="重量" prop="weight">
              <el-input v-model="form.weight" placeholder="请输入重量" />
            </el-form-item>
            <el-form-item label="商品介绍" prop="decript">
              <el-input v-model="form.decript" type="textarea" placeholder="请输入内容" />
            </el-form-item>
            <el-form-item label="热度" prop="heat">
              <el-input v-model="form.heat" placeholder="请输入热度" />
            </el-form-item>
            <el-form-item label="销量" prop="num">
              <el-input v-model="form.num" placeholder="请输入销量" />
            </el-form-item>
            <el-form-item label="商品库存" prop="ware">
              <el-input v-model="form.ware" placeholder="请输入商品库存" />
            </el-form-item>
            <el-form-item label="首图" prop="spuTopImages">
                      <image-upload v-model="form.spuTopImages"/>
                    </el-form-item>
             <el-form-item label="详情图" prop="spuInfoImages">
                 <image-upload v-model="form.spuInfoImages"/>
             </el-form-item>




                <el-tabs v-model="activeTab">
                  <el-tab-pane label="基本属性">
                            <el-button @click="addGroup">添加分组</el-button>
                            <el-row v-for="(group, index) in basicAttributes" :key="index">
                              <el-col :span="6">
                                <el-input v-model="basicAttributes[index].name" placeholder="分组名称"></el-input>
                              </el-col>
                              <el-col :span="18">
                                <el-row v-for="(attribute, i) in group.attributes" :key="i">
                                  <el-col :span="6">
                                    <el-input v-model="basicAttributes[index].attributes[i].name" placeholder="属性名"></el-input>
                                  </el-col>
                                  <el-col :span="6">
                                    <el-input v-model="basicAttributes[index].attributes[i].value" placeholder="属性值（多个值用逗号分隔）"></el-input>
                                  </el-col>
                                  <el-col :span="6">
                                    <el-button :disabled="basicAttributes[index].attributes.length === 1" @click="removeAttribute(index, i)">删除属性</el-button>
                                  </el-col>
                                </el-row>
                                <el-button @click="addAttribute(index)">添加属性</el-button>
                              </el-col>
                              <el-col :span="6">
                                <el-button @click="removeGroup(index)" :disabled="basicAttributes.length === 1">删除分组</el-button>
                              </el-col>
                            </el-row>
                          </el-tab-pane>
                  <el-tab-pane label="销售属性">
                    <el-button @click="addParameter">添加规格参数</el-button>
                    <el-row v-for="(parameter, index) in saleAttributes" :key="index">
                      <el-col :span="6">
                        <el-input v-model="saleAttributes[index].name" placeholder="规格参数名"></el-input>
                      </el-col>
                      <el-col :span="18">
                        <el-row v-for="(value, i) in parameter.values" :key="i">
                          <el-col :span="6">
                            <el-input v-model="saleAttributes[index].values[i]" placeholder="规格参数值"></el-input>
                          </el-col>
                          <el-col :span="6">
                            <el-button :disabled="saleAttributes[index].values.length === 1" @click="removeValue(index, i)">删除值</el-button>
                          </el-col>
                        </el-row>
                        <el-button @click="addValue(index)">添加值</el-button>
                      </el-col>
                      <el-col :span="6">
                        <el-button :disabled="saleAttributes.length === 1" @click="removeParameter(index)">删除规格参数</el-button>
                      </el-col>
                    </el-row>
                  </el-tab-pane>
                </el-tabs>
                <el-button @click="generateCartesianProduct">根据销售属性生成笛卡尔积（sku属性）</el-button>

                <div v-if="combinedStrings">
                    <el-card v-for="(item, index) in combinedStrings" :key="index" >
                    <h4>{{combinedStrings[index].skuName}}</h4>
                    <el-form>
                     <el-form-item label="图片" prop="combinedStrings[index].skuUrl">
                                   <image-upload v-model="combinedStrings[index].skuUrl"/>
                                 </el-form-item>
                                 <el-form-item label="价格" prop="combinedStrings[index].price">
                                                                   <el-input v-model="combinedStrings[index].price" placeholder="请输入商品价格" />
                                                                 </el-form-item>
                     <el-form-item label="库存" prop="combinedStrings[index].ware">
                                             <el-input v-model="combinedStrings[index].ware" placeholder="请输入商品库存" />
                     </el-form-item>

                                                                 </el-form>
<el-button @click="removeSku(index)" >删除当前sku</el-button>
                    </el-card>
                  </div>




          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
          </div>
        </el-dialog>




        <!-- 修改商品对话框 -->
                <el-dialog title="添加商品" :visible.sync="open" width="600px" append-to-body>
                  <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                    <div class="block">
                      <span class="demonstration">三级分类</span>
                      <el-cascader
                        v-model="form.catalogId"
                        :options="options"
                        :props="{ value: 'id',label:'name' }"
                        @change="handleChange">
                        </el-cascader>
                    </div>
                    <el-form-item label="头图" prop="header">
                      <image-upload v-model="form.header"/>
                    </el-form-item>
                    <el-form-item label="商品名称" prop="spuName">
                      <el-input v-model="form.spuName" placeholder="请输入商品名称" />
                    </el-form-item>
                    <el-form-item label="商品描述" prop="spuDescription">
                      <el-input v-model="form.spuDescription" placeholder="请输入商品描述" />
                    </el-form-item>
                    <el-form-item label="价格" prop="price">
                      <el-input v-model="form.price" placeholder="请输入价格" />
                    </el-form-item>
                    <el-form-item label="重量" prop="weight">
                      <el-input v-model="form.weight" placeholder="请输入重量" />
                    </el-form-item>
                    <el-form-item label="商品介绍" prop="decript">
                      <el-input v-model="form.decript" type="textarea" placeholder="请输入内容" />
                    </el-form-item>
                    <el-form-item label="热度" prop="heat">
                      <el-input v-model="form.heat" placeholder="请输入热度" />
                    </el-form-item>
                    <el-form-item label="销量" prop="num">
                      <el-input v-model="form.num" placeholder="请输入销量" />
                    </el-form-item>
                    <el-form-item label="商品库存" prop="ware">
                      <el-input v-model="form.ware" placeholder="请输入商品库存" />
                    </el-form-item>
                    <el-form-item label="首图" prop="spuTopImages">
                              <image-upload v-model="form.spuTopImages"/>
                            </el-form-item>
                     <el-form-item label="详情图" prop="spuInfoImages">
                         <image-upload v-model="form.spuInfoImages"/>
                     </el-form-item>




                        <el-tabs v-model="activeTab">
                          <el-tab-pane label="基本属性">
                                    <el-button @click="addGroup">添加分组</el-button>
                                    <el-row v-for="(group, index) in attrGroupList" :key="index">
                                      <el-col :span="6">
                                        <el-input v-model="attrGroupList[index].attrGroupName" placeholder="分组名称"></el-input>
                                      </el-col>
                                      <el-col :span="18">
                                        <el-row v-for="(attribute, i) in group.attrList" :key="i">
                                          <el-col :span="6">
                                            <el-input v-model="attrGroupList[index].attrList[i].attrName" placeholder="属性名"></el-input>
                                          </el-col>
                                          <el-col :span="6">
                                            <el-input v-model="attrGroupList[index].attrList[i].valueSelect" placeholder="属性值（多个值用逗号分隔）"></el-input>
                                          </el-col>
                                          <el-col :span="6">
                                            <el-button :disabled="attrGroupList[index].attrList.length === 1" @click="removeAttribute(index, i)">删除属性</el-button>
                                          </el-col>
                                        </el-row>
                                        <el-button @click="addAttribute(index)">添加属性</el-button>
                                      </el-col>
                                      <el-col :span="6">
                                        <el-button @click="removeGroup(index)" :disabled="attrGroupList.length === 1">删除分组</el-button>
                                      </el-col>
                                    </el-row>
                                  </el-tab-pane>
                          <el-tab-pane label="销售属性">
                            <el-button @click="addParameter">添加规格参数</el-button>
                            <el-row v-for="(parameter, index) in attrVoList" :key="index">
                              <el-col :span="6">
                                <el-input v-model="attrVoList[index].attrName" placeholder="规格参数名"></el-input>
                              </el-col>
                              <el-col :span="18">
                                <el-row v-for="(value, i) in parameter.valueAttrList" :key="i">
                                  <el-col :span="6">
                                    <el-input v-model="attrVoList[index].valueAttrList[i]" placeholder="规格参数值"></el-input>
                                  </el-col>
                                  <el-col :span="6">
                                    <el-button :disabled="attrVoList[index].valueAttrList.length === 1" @click="removeValue(index, i)">删除值</el-button>
                                  </el-col>
                                </el-row>
                                <el-button @click="addValue(index)">添加值</el-button>
                              </el-col>
                              <el-col :span="6">
                                <el-button :disabled="attrVoList.length === 1" @click="removeParameter(index)">删除规格参数</el-button>
                              </el-col>
                            </el-row>
                          </el-tab-pane>
                        </el-tabs>
                        <el-button @click="generateCartesianProductAlter">根据销售属性生成笛卡尔积（sku属性）</el-button>

                        <div v-if="combinedStrings">
                            <el-card v-for="(item, index) in combinedStrings" :key="index" >
                            <h4>{{combinedStrings[index].skuName}}</h4>
                            <el-form>
                             <el-form-item label="图片" prop="combinedStrings[index].skuUrl">
                                           <image-upload v-model="combinedStrings[index].skuUrl"/>
                                         </el-form-item>
                                         <el-form-item label="价格" prop="combinedStrings[index].price">
                                                                           <el-input v-model="combinedStrings[index].price" placeholder="请输入商品价格" />
                                                                         </el-form-item>
                             <el-form-item label="库存" prop="combinedStrings[index].ware">
                                                     <el-input v-model="combinedStrings[index].ware" placeholder="请输入商品库存" />
                             </el-form-item>

                                                                         </el-form>
        <el-button @click="removeSku(index)" >删除当前sku</el-button>
                            </el-card>
                          </div>
                  </el-form>
                  <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="submitFormAlter">确 定</el-button>
                    <el-button @click="cancel">取 消</el-button>
                  </div>
                </el-dialog>


  </div>
</template>

<script>
import { listSpu, getSpu,alterSpuStatus, delSpu, addSpu, alterSpu } from "@/api/qiantai/spu";
import { listCategory, getCategory, delCategory, addCategory, updateCategory } from "@/api/qiantai/category";

export default {
  name: "Spu",
  data() {
    return {
      //销售属性sku
    combinedStrings: [],
    dialogVisible: false,
          activeTab: '基本属性',
          //基本属性
          basicAttributes: [
            { name: '', attributes: [{ name: '', value: '' }] }
          ],
          //销售属性
          saleAttributes: [{ name: '', values: [''] }],
    attrVoList: [

          ],
          priceList: {},
          imageList: {},
    attrNameX: [],
    valueAttrList: [],
    type: [],
    options: [],
    attrGroupList: [],

attributeGroups: [
        {
          name: '基本信息',
          type: '基本属性',
          attributes: [
            {
              name: '材料',
              values: ['尼龙']
            },
            {
              name: '厚度',
              values: ['中度']
            }
          ]
        },
        {
          name: '颜色',
          type: '销售属性',
          attributes: [
            {
              name: '颜色',
              values: ['白色', '黑色']
            }
          ]
        }
      ],
      newGroupName: '',
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 商品表格数据
      spuList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      addOpen: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        catalogId: null,
        brandId: null,
        header: null,
        spuName: null,
        spuDescription: null,
        price: null,
        weight: null,
        decript: null,
        heat: null,
        num: null,
        ware: null,
        publishStatus: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      }
    };
  },
  created() {
    this.getList();
    this.getListCategoryTree()
  },
  methods: {
  //上架和下架
  handleSwitchChange(stater){
  let status = stater.publishStatus;
    console.log(stater);
    let  num = Number(status);
    let Params = {
      'id':stater.id,
      'status': num
    }
    alterSpuStatus(Params).then(response => {
this.$message({
          message: '操作成功',
          type: 'success'
        });
          });
  },
  showDialog() {
        this.dialogVisible = true;
      },
      //基本属性，添加分组
      addGroup() {
        this.basicAttributes.push({ name: '', attributes: [{ name: '', value: '' }] });
      },
      removeSku(index){
        this.combinedStrings.splice(index, 1);
      },
      removeGroup(index) {
        if (this.basicAttributes.length > 1) {
          this.basicAttributes.splice(index, 1);
        }
      },
      addAttribute(index) {
        this.basicAttributes[index].attributes.push({ name: '', value: '' });
      },
      //删除基本属性 属性
      removeAttribute(groupIndex, attributeIndex) {
      console.log("删除");
        this.basicAttributes[groupIndex].attributes.splice(attributeIndex, 1);
      },
      addValue(index) {
        this.saleAttributes[index].values.push('');
      },
      removeValue(index, valueIndex) {
        this.saleAttributes[index].values.splice(valueIndex, 1);
      },
      addParameter() {
        this.saleAttributes.push({ name: '', values: [''] });
      },
      removeParameter(index) {
        this.saleAttributes.splice(index, 1);
      },
      generateCartesianProduct() {
        if(!this.saleAttributes||this.saleAttributes.length==0){
        this.$message({
                        type: 'info',
                        message: `请输入销售属性`
                      });
        return;
        }
        for (let j = 0; j < this.saleAttributes.length; j++) {
                     if(this.saleAttributes[j].name===''){
                             this.$message({
                                             type: 'info',
                                             message: `销售属性名不能为空`
                                           });
                             return;
                             }
              for (let i = 0; i < this.saleAttributes[j].values.length; i++) {
              if(this.saleAttributes[j].values[i]===''){
                                                                        this.$message({
                                                                                        type: 'info',
                                                                                        message: `销售属性值不能为空`
                                                                                      });
                                                                        return;
                                                                        }

              }

                  }

        // 在这里实现生成笛卡尔积的逻辑

        console.log(this.saleAttributes);
         const combinations = this.calculateCombinations(this.saleAttributes);
         const combinedStrings = combinations.map(this.convertToCombinedString);
         let sku = [];

         for (let j = 0; j < combinedStrings.length; j++) {
              let m= {
              'skuName':combinedStrings[j],
              'price': '',
              'skuUrl': ''
              }
              sku.push(m);
          }
          this.combinedStrings = sku
         console.log(combinedStrings);
      },
      generateCartesianProductAlter() {
              if(!this.attrVoList||this.attrVoList.length==0){
              this.$message({
                              type: 'info',
                              message: `请输入销售属性`
                            });
              return;
              }
              for (let j = 0; j < this.attrVoList.length; j++) {
                           if(this.attrVoList[j].attrName===''){
                                   this.$message({
                                                   type: 'info',
                                                   message: `销售属性名不能为空`
                                                 });
                                   return;
                                   }
                    for (let i = 0; i < this.attrVoList[j].valueAttrList.length; i++) {
                    if(this.attrVoList[j].valueAttrList[i]===''){
                                                                              this.$message({
                                                                                              type: 'info',
                                                                                              message: `销售属性值不能为空`
                                                                                            });
                                                                              return;
                                                                              }

                    }

                        }

              // 在这里实现生成笛卡尔积的逻辑

              console.log(this.attrVoList);
               const combinations = this.calculateCombinationsAlter(this.attrVoList);
               const combinedStrings = combinations.map(this.convertToCombinedStringAlter);
               let sku = [];

               for (let j = 0; j < combinedStrings.length; j++) {
                    let m= {
                    'skuName':combinedStrings[j],
                    'price': '',
                    'skuUrl': ''
                    }
                    sku.push(m);
                }
                this.combinedStrings = sku
               console.log(combinedStrings);
            },




      // 计算笛卡尔积的函数
      calculateCombinations(attributes) {
        const result = [];

        function helper(arr, i, current) {
          if (i === arr.length) {
            result.push(current);
            return;
          }

          for (let j = 0; j < arr[i].values.length; j++) {
            helper(arr, i + 1, current.concat({ name: arr[i].name, value: arr[i].values[j] }));
          }
        }

        helper(attributes, 0, []);

        return result;
      },
       // 计算笛卡尔积的函数
            calculateCombinationsAlter(attributes) {
              const result = [];

              function helper(arr, i, current) {
                if (i === arr.length) {
                  result.push(current);
                  return;
                }

                for (let j = 0; j < arr[i].valueAttrList.length; j++) {
                  helper(arr, i + 1, current.concat({ name: arr[i].attrName, value: arr[i].valueAttrList[j] }));
                }
              }

              helper(attributes, 0, []);

              return result;
            },

      // 将属性和值对象转换为字符串形式
      convertToCombinedString(attributes) {
        return attributes.map(attr => `${attr.value}`).join(' ');
      },
      // 将属性和值对象转换为字符串形式
            convertToCombinedStringAlter(attributes) {
              return attributes.map(attr => `${attr.value}`).join(' ');
            },

   handleChange(){
   },
   handleRemove(){
   },
   handleUploadSuccess(){
   },

  addGroupAttribute(groupIndex) {
        this.attributeGroups[groupIndex].attributes.push({
          name: '',
          values: ['']
        });
      },

      addAttributeValue(groupIndex, attributeIndex) {
        this.attributeGroups[groupIndex].attributes[attributeIndex].values.push('');
      },
      removeAttributeValue(groupIndex, attributeIndex, valueIndex) {
        this.attributeGroups[groupIndex].attributes[attributeIndex].values.splice(valueIndex, 1);
      },


      /** 查询商品三级分类列表 */
          getListCategoryTree() {
            listCategory().then(response => {
              this.options = response.data;
            });
          },

    /** 查询商品列表 */
    getList() {
      this.loading = true;
      listSpu(this.queryParams).then(response => {
        this.spuList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        catalogId: null,
        brandId: null,
        header: null,
        spuName: null,
        spuDescription: null,
        price: null,
        weight: null,
        decript: null,
        heat: null,
        num: null,
        ware: null,
        publishStatus: null,
        remark: null,
        createTime: null,
        updateTime: null,
        isDelete: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加商品";
    },
    handleAddOpen() {
                       this.reset();
                       this.addOpen = true;

                     },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getSpu(id).then(response => {
        this.form = response.data;
        this.attrGroupList = this.form.attrGroupList;
        this.attrVoList = this.form.attrVoList;
        this.open = true;
        this.title = "修改商品";
      });
    },
    /** 提交按钮 */
    submitForm() {


      this.$refs["form"].validate(valid => {
      this.form.catalogId = this.form.catalogId[2];
      //封装请求参数
      let prim = {
            'spu':this.form,
            'sku': this.combinedStrings,
            'basicAttributes':this.basicAttributes,
            'saleAttributes':this.saleAttributes
          };

            addSpu(prim).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.addOpen = false;
              this.getList();
            });

      });
    },
    /** 修改提交按钮 */
        submitFormAlter() {


          this.$refs["form"].validate(valid => {
          //封装请求参数attrVoList attrGroupList
          let prim = {
                'spu':this.form,
                'sku': this.combinedStrings,
                'attrGroupList':this.attrGroupList,
                'attrVoList':this.attrVoList
              };

                alterSpu(prim).then(response => {
                  this.$modal.msgSuccess("新增成功");
                  this.open = false;
                  this.getList();
                });

          });
        },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除商品编号为"' + ids + '"的数据项？').then(function() {
        return delSpu(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('qiantai/spu/export', {
        ...this.queryParams
      }, `spu_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>
